<template>
  <view class="container">
    <z-paging-swiper>
      <view slot="top">
        <u-navbar title="商品管理" title-size="36rpx"></u-navbar>
        <view class="tabsView">
          <u-tabs-swiper
            ref="uTabs"
            :list="tabsList"
            :current="current"
            @change="tabsChange"
            :is-scroll="false"
            :show-bar="false"
            active-color="#0F76BC"
            swiper-width="750"
          >
          </u-tabs-swiper>
        </view>
        <u-gap height="20" bg-color="#f5f5f5"></u-gap>

        <view class="" style="margin-left: 200rpx; z-index: 999999; height: 82rpx">
          <u-tabs-swiper
            :list="menuList[menuIndex].children"
            :is-scroll="true"
            :show-bar="false"
            :current="tcurrent"
            swiper-width="750"
            active-color="#0F76BC"
            @change="changeTabs"
          >
          </u-tabs-swiper>
        </view>
      </view>
      <view slot="left" class="rightView">
        <scroll-view
          scroll-y
          class="scrollView"
          style="height: 1180rpx"
          :enhanced="true"
          :show-scrollbar="false"
        >
          <view class="menuView">
            <view
              :class="menuIndex == index ? 'menuTab' : 'menuTab2'"
              v-for="(item, index) in menuList"
              :key="index"
              @click="onMenuTab(index, item)"
            >
              {{ item.name }}
            </view>
          </view>
        </scroll-view>
      </view>
      <swiper
        class="swiperView"
        :current="scurrent"
        @transition="transition"
        @animationfinish="animationfinish"
      >
        <swiper-item v-for="(item2, index2) in tabsList" :key="index2" class="swiperItem">
          <z-paging
            ref="paging"
            v-model="itemList[index2]"
            @query="queryList"
            :fixed="false"
            :auto="false"
            :empty-view-img="`${getImageUrl('empty.png')} `"
            empty-view-text="暂无数据~"
            :empty-view-img-style="imgStyle"
          >
            <!-- <view class="headView">
							<view :class="sortIndex==0?'sortTab2':'sortTab'" @click="onSortTab(0)">综合</view>
							<view :class="sortIndex==1?'sortTab2':'sortTab'" @click="onSortTab(1)">
								<text style="margin-right: 5rpx;">销量 </text>
								<u-icon size="15" name="/static/sort1.png" v-if="sale_order == 'ASC'"></u-icon>
								<u-icon size="15" name="/static/sort2.png" v-else-if="sale_order == 'DESC'"></u-icon>
								<u-icon size="15" name="/static/sort.png" v-else></u-icon>
							</view>
							<view :class="sortIndex==2?'sortTab2':'sortTab'" @click="onSortTab(2)">
								<text style="margin-right: 5rpx;">价格</text>
								<u-icon size="15" name="/static/sort1.png" v-if="price_order == 'ASC'"></u-icon>
								<u-icon size="15" name="/static/sort2.png" v-else-if="price_order == 'DESC'"></u-icon>
								<u-icon size="15" name="/static/sort.png" v-else></u-icon>
							</view>
						</view> -->

            <view class="right-view">
              <view
                class="view-box"
                v-for="(item, index) in itemList[index2]"
                :key="index"
                @click="onDetails(item)"
              >
                <view class="itemView">
                  <u-image width="160" height="160" :src="item.picUrl" border-radius="8"></u-image>
                  <view class="itemInfo">
                    <view class="itemTitle">{{ item.name }}</view>
                    <view class="priceView">
                      <view class="goods-num">
                        库存{{ item.stock }} 销量{{ item.salesCount }}
                        <u-icon class="icon" name="/static/img/mydd_xg.png" size="30"></u-icon>
                      </view>
                    </view>
                    <view class="">
                      <view class="itemPrice2">¥{{ (item.price * 0.01).toFixed(2) }}</view>
                      <view style="flex: 1"></view>
                    </view>
                  </view>
                </view>
                <view class="item-floor">
                  <view @click.stop.prevent="onEdit(item)" class="btn"> 编辑 </view>
                  <view
                    v-if="scurrent == 0 || scurrent == 1"
                    @click.stop.prevent="onOff(item)"
                    class="btn"
                  >
                    下架
                  </view>
                  <view v-if="scurrent == 2" @click.stop.prevent="onUp(item)" class="btn">
                    上架
                  </view>
                </view>
              </view>
            </view>
          </z-paging>
          <view class="submit-btn"> </view>
        </swiper-item>
        <!-- <swiper-item class="swiperItem">
					<z-paging ref="paging2" v-model="itemList2" @query="queryList2" :fixed="false" :auto="false"
						:empty-view-img="`${getImageUrl('empty.png')} `" empty-view-text="暂无数据~" :empty-view-img-style="imgStyle">
						<view class="comment-area">
							<view class="comment-box" @click="routeTo" v-for="item in itemList2">
								<view class="comment-info">
									<view class="comment-info-left">
										<image class="info-left-tx" src="" mode=""></image>
										<view class="info-left-username">
											<p>用户1</p>
											<p>2024-01-05</p>
										</view>
									</view>
									<view class="comment-info-right">
										<p style="text-align: right;">非常满意</p>
										<view class="">
											<u-rate></u-rate>
										</view>
									</view>
								</view>
								<view class="comment-content">
									<view class="">
										产品非常好，非常喜欢。产品非常好，非常喜欢。产品非常好，非常喜欢。产品非常好，非常喜欢。产品非常好，非常喜欢。
									</view>
									<view class="comment-img">
										<image src="../../static/" mode=""></image>

									</view>
								</view>
							</view>
						</view>
					</z-paging>
				</swiper-item> -->
        <!-- <swiper-item class="swiperItem">
					<z-paging ref="paging3" v-model="itemList3" @query="queryList3" :fixed="false" :auto="false"
						:empty-view-img="`${getImageUrl('empty.png')} `" empty-view-text="暂无数据~" :empty-view-img-style="imgStyle">
						<view class="video-area">
							<view class="video-area-box">
								<image class="video-area-cover" src="" mode=""></image>
							</view>

						</view>
					</z-paging>
				</swiper-item> -->
      </swiper>
    </z-paging-swiper>

    <view class="btn-box">
      <!-- <view class="btn-group">
				<view class="btn-item" @click="routeTo('/other_center/mer-goods-category/mer-goods-category?status=2')">

					<u-icon name="/static/img/flgl@2x.png" size="36"></u-icon>
					<view class="" >
						分类管理
					</view>
				</view>
				<view class="btn-item" @click="routeTo('/other_center/mer-goods-category/mer-goods-category?status=1')">
					<view class="">
						<u-icon name="/static/img/flpx@2x.png" size="36"></u-icon>
						<view class="">
							分类排序
						</view>
					</view>
				</view>
			</view> -->
      <view class="" style="flex: 1"> </view>
      <view class="goodxs-btn" @click="routeTo(1)">
        <u-icon style="margin-right: 10rpx" name="/static/img/tjsp.png" size="32"></u-icon> 添加商品
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      scrollHeight: '600rpx',
      imgStyle: {
        width: '12rem'
      },
      iconStyle: {
        width: '50rpx',
        height: '50rpx'
      },
      titleStyle: {
        fontSize: '28rpx'
      },
      userShow: false,
      tcurrent: 0,
      current: 0,
      scurrent: 0,
      tabsList: [
        {
          name: '全部',
          status: ''
        },
        {
          name: '销售中',
          status: 0
        },
        {
          name: '已下架',
          status: 1
        },
        {
          name: '已售清',
          status: 2
        }
      ],
      itemList: [[], [], [], []],
      userInfo: '',
      menuIndex: 0,
      checkedCate: '',
      menuList: [[{ children: [] }]],
      shopId: '',
      shopType: 1,
      isToast: false
    }
  },
  onLoad() {},
  onShow() {
    // this.$u.get("/app-api/shop/product-category/my-list").then(res=>{
    // 	this.menuList = res.data
    // 	this.checkedCate = res.data[0]
    // 	this.queryList()
    // })

    this.shopType = uni.getStorageSync('shopType')
    this.shopId = uni.getStorageSync('shopId')
    if (this.shopType == 1) {
      this.$u.get('/app-api/shop/detail/get-category-list?type=1').then((res) => {
        let arr = []
        for (let item of res.data) {
          if (item.parentId == 6) {
            //this.this.menuList.push(item)
            arr.push(item)
          } else {
            for (let item2 of res.data) {
              if (item2.id == item.parentId) {
                if (item2.children) {
                  item2.children.push(item)
                } else {
                  item2.children = [item]
                }
                break
              }
            }
          }
        }
        this.menuList = arr
        this.checkedCate = this.menuList[0]
        this.queryList()
      })
    } else {
      this.$u.get('/app-api/shop/detail/get-category-list?type=2').then((res) => {
        this.menuList = res.data
        this.checkedCate = this.menuList[0]
        this.queryList()
      })
    }
  },
  methods: {
    tabsChange(index) {
      this.scurrent = index
    },
    transition(e) {
      let dx = e.detail.dx
      this.$refs.uTabs.setDx(dx)
    },
    animationfinish(e) {
      this.current = e.detail.current
      this.scurrent = e.detail.current
      this.$refs.uTabs.setFinishCurrent(e.detail.current)

      if (this.itemList[this.scurrent].length == 0) {
        this.queryList()
      }
    },
    onMenuTab(index, item) {
      this.menuIndex = index
      this.checkedCate = item
      this.tcurrent = 0
      this.isToast = true
      this.queryList()
    },
    onSortTab(index) {
      this.sortIndex = index
      if (index == 0) {
        this.sale_order = ''
        this.price_order = ''
      }
      if (index == 1) {
        if (this.sale_order == 'ASC') {
          this.sale_order = 'DESC'
        } else {
          this.sale_order = 'ASC'
        }
        this.price_order = ''
      }
      if (index == 2) {
        if (this.price_order == 'ASC') {
          this.price_order = 'DESC'
        } else {
          this.price_order = 'ASC'
        }
        this.sale_order = ''
      }
      this.$refs.paging.reload()
    },
    queryList(page = 1, pageSize = 10) {
      if (this.shopType == 1) {
        let self = this
        let categoryId = this.checkedCate.children
          ? this.checkedCate.children[this.tcurrent].id
          : this.checkedCate.id
        this.$u
          .get(
            `/app-api/product/spu/page?tabType=${this.tabsList[this.scurrent].status}
								&categoryId=${categoryId}
								&shopId=${this.shopId}
								&pageNo=${page}
								&pageSize=${pageSize}
								`
          )
          .then((res) => {
            if (this.isToast) {
              if (this.checkedCate) {
                uni.showToast({
                  icon: 'none',
                  title: '二级分类：' + this.checkedCate.children[this.tcurrent].name,
                  duration: 800
                })
              } else {
                uni.showToast({
                  icon: 'none',
                  title: '二级分类：' + this.checkedCate.children[this.tcurrent].name,
                  duration: 800
                })
              }
            }

            this.isToast = false
            self.$refs.paging[this.scurrent].complete(res.data.list)
          })
      } else {
        this.$u
          .get(
            `/app-api/product/spu/page?tabType=${this.tabsList[this.scurrent].status}
								&categoryId=${this.checkedCate.id}
								&shopId=${this.shopId}
								`
          )
          .then((res) => {
            this.$refs.paging[this.scurrent].complete(res.data.list)
          })
      }
    },

    onEdit(item) {
      let category = ''
      if (this.shopType == 1) {
        category = this.checkedCate.children
          ? this.checkedCate.children[this.tcurrent]
          : this.checkedCate
      } else {
        category = this.checkedCate
      }

      uni.navigateTo({
        url:
          '/other_center/mer-goods-manage/mer-goods-manage?goodsInfo=' +
          JSON.stringify(item) +
          '&cate=' +
          JSON.stringify(category)
      })
    },
    onUp(item) {
      this.$u.put('/app-api/product/spu/update-status', { id: item.id, status: 1 }).then((res) => {
        this.queryList()
      })
    },
    onOff(item) {
      this.$u.put('/app-api/product/spu/update-status', { id: item.id, status: 0 }).then((res) => {
        this.queryList()
      })
    },
    onDetails(item) {
      this.$utils.route({
        url: '/goods/goods-details/goods-details',
        params: {
          type: this.current == 0 ? 1 : 2,
          goodsId: item.id
        }
      })
    },
    routeTo(url) {
      let category = ''
      let msg = ''
      if (this.shopType == 1) {
        category = this.checkedCate.children
          ? this.checkedCate.children[this.tcurrent]
          : this.checkedCate
        msg = this.checkedCate.children[this.tcurrent].name
      } else {
        category = this.checkedCate

        msg = this.checkedCate.name
      }

      uni.dialog.confirm('温馨提示', '需要向分类“' + msg + '”中添加商品吗？', () => {
        uni.navigateTo({
          url: '/other_center/mer-goods-manage/mer-goods-manage?cate=' + JSON.stringify(category)
        })
      })
    },

    changeTabs(e) {
      this.tcurrent = e
      this.isToast = true
      this.queryList()
    }
  }
}
</script>

<style scoped>
page {
  background: #fff;
}

.rightView {
  width: 180rpx;
  height: 100%;
  background: #f5f5f5;
}

.scrollView {
  display: flex;
  flex-direction: column;
  width: 180rpx;
  height: 100%;
}

.menuView {
  display: flex;
  flex-direction: column;
}

.menuTab {
  height: 110rpx;
  line-height: 110rpx;
  background: #d7e9f5;
  text-align: center;
  font-size: 28rpx;
  font-weight: 400;
  color: #0f76bc;
  position: relative;
}

.menuTab2 {
  height: 110rpx;
  line-height: 110rpx;
  border-bottom: 1px solid #fff;
  text-align: center;
  font-size: 28rpx;
  font-weight: 400;
  color: #333333;
}

.menuTab::before {
  content: '';
  position: absolute;
  border-left: 3px solid #0f76bc;
  height: 60rpx;
  left: 0;
  top: 25rpx;
}

.headView {
  display: flex;
  align-items: center;
  position: sticky;
  background: #fff;
  z-index: 100;
  height: 80rpx;
  top: 0px;
}

.sortTab {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  padding: 0px 20rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: #333333;
}

.sortTab2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  line-height: 80rpx;
  text-align: center;
  padding: 0px 20rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: #22b857;
}

.view-box {
  margin-bottom: 25rpx;
  position: relative;
}

.itemView {
  display: flex;
  flex-direction: row;
  margin: 0px 20rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
}

.itemInfo {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 10rpx;
}

.itemTitle {
  font-size: 26rpx;
  font-weight: 400;
  color: #333333;
}

.goods-num {
  color: #999999;
  font-size: 22rpx;
}

.priceView {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.itemPrice {
  font-size: 20rpx;
  font-weight: 400;
  color: #ff3616;
  margin-right: 10rpx;
}

.itemPrice2 {
  font-size: 28rpx;
  font-weight: bold;
  color: #ff2323;
  margin-right: 10rpx;
}

.item-floor {
  font-size: 24rpx;
  text-align: right;
  padding: 15rpx;
  border-bottom: #ededed solid 2rpx;
}

.itemOPrice {
  font-size: 24rpx;
  font-weight: 400;
  text-decoration: line-through;
  color: #c2c2c2;
}

.btn {
  display: inline-block;
  padding: 5rpx 15rpx;
  border: #dbdadc solid 2rpx;
  margin-left: 20rpx;
}

.icon {
  position: absolute;
  right: 20rpx;
}

.btn-box {
  position: fixed;
  bottom: 5rpx;
  width: 750rpx;
  height: 96rpx;
  display: flex;
  align-items: center;
  z-index: 999;
  font-size: 35rpx;
  background-color: #fff;
}

.btn-group {
  flex: 1;
  display: flex;
  font-size: 24rpx;
}
.btn-item {
  text-align: center;
  margin: 20rpx;
}

.goodxs-btn {
  margin-right: 25rpx;
  display: inline-block;
  background-color: #0f76bc;
  border-radius: 45rpx;
  padding: 10rpx 25rpx;
  color: #fff;
}
</style>
